import React from 'react';
import { StyleSheet, ScrollView } from 'react-native';
import {
  Colors,
  Text,
  View,
  Fader,
} from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

const FaderScreen = () => {
  return (
    <TestSuite name="Fader">
      <TestCase itShould="position">
        <Text text70 grey40 marginT-30 marginB-10>
          position:START
        </Text>
        <View style={styles.horizontalContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible
            position={Fader.position.START}
            size={30}
            tintColor={'#f5f5f5'}
          />
        </View>

        <Text text70 grey40 marginT-30 marginB-10>
          position:END
        </Text>
        <View style={styles.horizontalContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible
            position={Fader.position.END}
            size={30}
            tintColor={'#f5f5f5'}
          />
        </View>

        <Text text70 grey40 marginT-30 marginB-10>
          position:TOP
        </Text>
        <View style={styles.verticalContainer}>
          <ScrollView vertical showsVerticalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible
            position={Fader.position.TOP}
            size={30}
            tintColor={'#f5f5f5'}
          />
        </View>

        <Text text70 grey40 marginT-30 marginB-10>
          position:BOTTOM
        </Text>
        <View style={styles.verticalContainer}>
          <ScrollView vertical showsVerticalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible
            position={Fader.position.BOTTOM}
            size={30}
            tintColor={'#f5f5f5'}
          />
        </View>
      </TestCase>

      <TestCase itShould="size">
        <Text text70 grey40 marginT-30 marginB-10>
          size:20
        </Text>
        <View style={styles.horizontalContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible
            position={Fader.position.START}
            size={20}
            tintColor={'#f5f5f5'}
          />
        </View>

        <Text text70 grey40 marginT-30 marginB-10>
          size:50
        </Text>
        <View style={styles.horizontalContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible
            position={Fader.position.START}
            size={50}
            tintColor={'#f5f5f5'}
          />
        </View>
      </TestCase>

      <TestCase itShould="tintColor">
        <Text text70 grey40 marginT-30 marginB-10>
          tintColor:#f5f5f5
        </Text>
        <View style={styles.horizontalContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible
            position={Fader.position.START}
            size={30}
            tintColor={'#f5f5f5'}
          />
        </View>

        <Text text70 grey40 marginT-30 marginB-10>
          tintColor:#08e939ff
        </Text>
        <View style={styles.horizontalContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible
            position={Fader.position.START}
            size={30}
            tintColor={'#08e939ff'}
          />
        </View>
      </TestCase>

      <TestCase itShould="visible">
        <Text text70 grey40 marginT-30 marginB-10>
          visible:true
        </Text>
        <View style={styles.horizontalContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible={true}
            position={Fader.position.START}
            size={30}
            tintColor={'#f5f5f5'}
          />
        </View>

        <Text text70 grey40 marginT-30 marginB-10>
          visible:false
        </Text>
        <View style={styles.horizontalContainer}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {Array.from({ length: 6 }).map((_, index) => (
              <View key={index} style={styles.card}>
                <Text white text50>{index + 1}</Text>
              </View>
            ))}
          </ScrollView>

          <Fader
            visible={false}
            position={Fader.position.START}
            size={30}
            tintColor={'#f5f5f5'}
          />
        </View>
      </TestCase>
    </TestSuite>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    paddingTop: 60,
    backgroundColor: '#f5f5f5',
    minHeight: '100%',
  },
  verticalContainer: {
    height: 250,
    width: "50%",
    backgroundColor: 'white',
    padding: 15,
    overflow: 'hidden',
  },
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
    paddingBottom: 10,
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: Colors.blue60,
    marginRight: 10,
  },
  horizontalContainer: {
    height: 120,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  card: {
    width: 100,
    height: 100,
    backgroundColor: Colors.orange40,
    marginRight: 10,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default FaderScreen;